<template>
  <div class="chart-container">
    <dv-scroll-board
      ref="scrollBoard"
      :config="config"
      style="width: 100%; height: 100%"
      @mouseover="mouseoverHandler"
      @click="clickHandler"
    />
  </div>
</template>

<script setup name="MyChart4">
import { reactive } from "vue";

const config = reactive({
  header: ["报警记录", ""],
  data: [
    ['<span style="color:#37a2da;">xx报警</span>', "行1列2"],
    ["xx报警", '<span style="color:#32c5e9;">行2列2</span>'],
    ["xx报警", "行3列2"],
    ["xx报警", '<span style="color:#9fe6b8;">行4列2</span>'],
    ['xx报警', "行5列2"],
    ["xx报警", '<span style="color:#ff9f7f;">行6列2</span>'],
    ["xx报警", "行7列2"],
    ["xx报警", '<span style="color:#e062ae;">行8列2</span>'],
    ['<span style="color:#e690d1;">xx报警</span>', "行9列2"],
    ["xx报警", '<span style="color:#e7bcf3;">行10列2</span>'],
  ],
  index: true,
  columnWidth: [40],
  align: ["center"],
});

const mouseoverHandler = (e) => {
  console.log(e);
};

const clickHandler = (e) => {
  console.log(e);
};

</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>
